<template>
  <div class="case-undertake">
    <checked-title>
      <template #title>
        <div class="title">
          <span></span>
          <span>案件类型承办{{ title }}TOP榜</span>
          <div @click="tabsClick" class="icon">
            <img alt class="img" src="@/assets/images/shouyetab.png" />
          </div>
        </div>
      </template>
    </checked-title>
    <div class="ranking">
      <div class="ranking_title">
        <li>排名</li>
        <li>案件类型</li>
        <li>本月案件量</li>
        <li>上月案件量</li>
        <li>与上月同期</li>
      </div>
      <div class="ranking_list">
        <template v-if="rankingData.length > 0">
          <ul :key="'a' + index" v-for="(item, index) in rankingData">
            <li :style="{ color: index < 3 ? '#FFC300' : '#FF6C1D' }">{{ index + 1 }}</li>
            <li>{{ item.aType }}</li>
            <li>{{ item.num }}</li>
            <li>{{ item.lastMonthCompareNum || "——" }}</li>
            <li :class="Number(item.compareNum) > 0 ? 'rise' : 'descend'">
              <i :class="Number(item.compareNum) > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              {{ item.percentage }}
            </li>
          </ul>
        </template>
        <template v-else>
          <div style="width: 100%;height: 200px;display: flex;justify-content: center;align-items: center;">
            <img style="height: 60%;" src="../../../assets/images/home/kong1.png" alt="">
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { HomeDb } from '@/api'
export default {
  components: {},
  data() {
    return {
      rankingData: [],
      sorted: 1
    }
  },
  mounted() {
    this.getData()

    // 计时器 每60秒刷新一次
    this.setTimer()
  },
  computed: {
    title() {
      return this.sorted == 1 ? '上升' : '下降'
    }
  },
  methods: {
    setTimer() {
      let timer = null
      timer && clearInterval(timer)
      timer = setInterval(() => {
        this.tabsClick()
      }, 60000)
    },
    getData() {
      // 本月案件数量
      HomeDb.grtCaseRanking({ sorted: this.sorted }).then(res => {
        this.rankingData = res.data
      })
    },
    tabsClick() {
      this.sorted = this.sorted == 2 ? 1 : 2
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.case-undertake {
  width: 100%;
  padding: 0 10px;

  .title {
    display: flex;
    justify-content: space-between;
    align-content: center;

    .icon {
      transform: rotate(180deg);
      color: #00fbf0;
      cursor: pointer;
      width: 18px;
      height: auto;
      margin-bottom: 10px;

      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .ranking {
    width: 100%;
    height: 100%;

    .ranking_title {
      width: 100%;
      height: 50px;
      background: #173271;
      display: flex;

      li {
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #46ede8;
        text-align: center;
        line-height: 50px;
        white-space: nowrap;
      }

      li:nth-child(1) {
        width: 10%;
      }

      li:nth-child(2) {
        width: 20%;
      }

      li:nth-child(3) {
        width: 20%;
      }

      li:nth-child(4) {
        width: 20%;
      }

      li:nth-child(5) {
        width: 30%;
      }
    }

    .ranking_list {
      // height: auto;
      // max-height: 300px;
      height: 200px;
      overflow: auto;

      ul {
        display: flex;
        height: 50px;

        .rise {
          color: #e63535;
        }

        .descend {
          color: #35e641;
        }

        li {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cfcfcf;
          text-align: center;
          line-height: 50px;
          white-space: nowrap;
        }

        li:nth-child(1) {
          font-size: 19px;
          font-family: DIN;
          font-weight: bold;
          font-style: italic;
          color: #ff6c1d;
          text-align: center;
          width: 10%;
        }

        li:nth-child(2) {
          width: 20%;
        }

        li:nth-child(3) {
          width: 20%;
        }

        li:nth-child(4) {
          width: 20%;
        }

        li:nth-child(5) {
          width: 30%;
        }
      }
    }
  }
}
</style>